<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }

        .dm{
            width:400px;
            height: 200px;
            border:0px solid red;
            overflow:
                hidden;
            position: absolute;top:280px;left:0px;
            background: rgba(0,0,0,0.4);
            color:white;
        }

    </style>
</head>
<body style="background-color: black;">

    <div style="width:600px;height: 480px;margin:0px auto;position:relative;">
        <div class="dm" style="" id="ctxt"></div>

        <video id="vidio"/>
    </div>
    <canvas id="output" style="display:none"></canvas>



    <script>

        // javascript = ecmascript + dom + bom   es8
        // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
        // 设置事件监听器
        window.addEventListener("DOMContentLoaded", function() {
            if (navigator.mediaDevices === undefined) {
                var div = document.createElement("div");
                div.innerHTML = 'mediaDevices not supported';
                document.body.appendChild(div);
            }

            navigator.getUserMedia = navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia;

            if (navigator.getUserMedia) {  //能力检测
                navigator.getUserMedia({
                        audio: true,  //音频
                        video: {
                            width: 600,
                            height: 480
                        }
                    },
                    function(stream) {  // 获取设备成功的回调
                        var video = document.querySelector('video');
                        video.srcObject = stream;
                        video.onloadedmetadata = function(e) {
                            video.play();  //让vidio播放
                        };
                    },
                    function(err) {
                        alert("The following error occurred: " + err.name);
                    }
                );
            } else {
                var div = document.createElement("div");
                div.innerHTML = 'getUserMedia not supported';
                document.body.appendChild(div);
                alert("getUserMedia not supported");
            }

        }, false);


        var socket;
        var interval;
        var output = document.getElementById("output");
        var outputContext = output.getContext("2d");
        function init() {
            socket = new WebSocket("ws://127.0.0.1:9999/onlineServer/sdkhfais");
            socket.onopen = onOpen;
            socket.onclose = onClose;

            console.log("room  init ...")
        }

        setTimeout(init,300);

        var onOpen = function(){
            console.log("room  onOpen ...")

            clearInterval(interval);
            interval = setInterval(function () {
                draw();
            },50);

        }

        var onClose = function () {
            init();
        }

        var draw = function () {

            console.log("room  draw ...")

            outputContext.drawImage(vidio,0,0,output.width,output.height);
            //将视频图像压缩50%发送
            socket.send(output.toDataURL("image/jpeg",0.5));

        }

        var msg_socket = new WebSocket("ws://127.0.0.1:9999/chatServer/sdkhfais");

        msg_socket.onmessage = function (info) {
//            var ctxt = document.getElementById("ctxt");
//
//            ctxt.innerHTML+=info.data+"<br />";

            var now = new Date();
            var div = document.getElementById('ctxt');
            div.innerHTML = div.innerHTML + info.data + '<br />';
            div.scrollTop = div.scrollHeight;
        }

        function add()
        {

        }

    </script>
</body>
</html>